<template>
  <div class="layout">
    <Layout>
      <Sider  ref="sideLeft" hide-trigger collapsible :width="220" :collapsed-width="78" v-model="isCollapsed" :style="{background: '#515a6e',height: '100%',color:'#eee',overflow: 'hidden'}">
        <!--左侧导航展开-->
        <Menu width="auto" height="100%"  ref='menu' style="color: #eee" theme="dark" :class="menuitemClasses" accordion @on-select="slectName" :active-name="activeName" :open-names='openName'>
          <div style="height: 16px;">
            <!-- <span style="width:100%;line-height: 64px;text-align: center;font-size: 26px;" v-if="modalShowLogo">瓜钱包 - 管理系统</span>
            <span style="width:100%;line-height: 64px;text-align: center;font-size: 26px;" v-if="!modalShowLogo">瓜</span> -->
          </div>
           <MenuItem v-for="(item,index) in menuList" :key="index" :name="index+1"  v-if="item.name=='工作台'" :to="'/work/'+item.path">
             <Icon :type="item.icon"></Icon>
             <span class="menu-item-title">{{item.name}}</span>
          </MenuItem>
          <Submenu v-for="(item,index) in menuList" :key="index" :name="index+1"  v-if="item.name!='工作台'">
            <template slot="title">
              <Icon :type="item.icon"></Icon>
              <span class="menu-item-title">{{item.name}}</span>
            </template>
            <div v-for="(obj,idx) in item.child" :key="idx">
              <MenuItem v-if="!obj.child" :name="(index+1)+'-'+idx" :to="'/work/'+obj.path">{{obj.name}}</MenuItem>
              <menu-tree v-else :menuItem="obj" :parentId="(index+1)+'-'+idx"></menu-tree>
            </div>
          </Submenu>
        </Menu>
      </Sider>
      <div class="dropdown-hide" :class="dropdownToggle">
        <Dropdown placement="right-start" v-for="(item,index) in menuList" :key="index" @on-click="linkPage">
          <a href="javascript:void(0)">
            <Icon :type="item.icon" size="22"></Icon>
          </a>
          <DropdownMenu slot="list">
            <div v-for="(obj,idx) in item.child" :key="idx">
              <DropdownItem v-if="!obj.child" :name="obj.href">{{obj.name}}</DropdownItem>
              <sider-tree v-if="obj.child" :menuItem="obj"></sider-tree>
            </div>
          </DropdownMenu>
        </Dropdown>
      </div>
      <Layout>
        <Header >
          <Menu mode="horizontal">
            <div class="collapse-btn" style="width:28px;" >
              <Icon @click.native="collapsedSider" :class="rotateIcon" :style="{margin: '0 20px',color:'#000'}" type="md-menu" size="24"></Icon>
            </div>
            <div class="layout-nav">
              <Dropdown style="margin-right: 40px;"  @on-click="handleClick">
              <span class="account"> {{account}}</span>
              <Icon type="ios-contact-outline" size="24"></Icon>
                <DropdownMenu slot="list">
                  <DropdownItem name="changePwd">修改密码</DropdownItem>
                   <DropdownItem name="logout">退出登录</DropdownItem>
                </DropdownMenu>
              </Dropdown>
              <!--<MenuItem name="5">-->
                <!--<Icon type="ios-exit-outline" size="24"></Icon>-->
              <!--</MenuItem>-->
            </div>
          </Menu>
          <div class="tag-nav-wrapper">
            <tags-nav  @activeName="getactiveName"></tags-nav>
          </div>
        </Header>
        <Content :style="{padding: '30px 20px',overFlow:'auto'}">
          <Layout>
            <router-view @menulist="getLeftMenuListS" :nameSelect='name'/>
          </Layout>
        </Content>
      </Layout>
    </Layout>
     <Modal
      v-model="modalShow"
      title="修改密码"
      width="500"
      :footer-hide="true"
       :closable="false"
      :mask-closable="false"
     >
      <Form ref="formData" :model="formData"  :rules="ruleValidate" :label-width="110">
        <FormItem label="新密码" prop="pwd">
          <Input v-model.trim="formData.pwd"  type="password" style="width: 200px" placeholder="请输入6位以上新密码"/>
        </FormItem>
        <FormItem label="确认密码" prop="second_pwd">
          <Input v-model.trim="formData.second_pwd" type="password"  style="width: 200px" placeholder="请确认密码"/>
        </FormItem>
      <div style="text-align:right">
        <Button @click="modalShow = false;resetValidate('formData');" style="margin-right:2px">取消</Button>
        <Button type = "primary" @click="editPwd">确定</Button>
      </div>
      </Form>
    </Modal>
  </div>
</template>

<script>
  import TagsNav from './template/tags-nav'
  import menuTree from './template/menuTreeTemplate'
  import siderTree from './template/siderTreeTemplate'
  import menuList from '../json/menu.json'
  import store from '../store'
  export default {
    name: 'layout',
    components:{
      TagsNav,
      menuTree,
      siderTree
    },
    data () {
      return {
        modalShowLogo: true,
        isCollapsed: false,
        /*tag: {
          'title': '工作台',
          'path': '/work'
        },*/
        formData:{},
         ruleValidate:{
          pwd: [
            { required: true,   message: '请输入密码',trigger: 'blur'}
          ],
          second_pwd: [
            { required: true,   message: '请输入密码',trigger: 'blur'}
          ],
       },
        parentId: '',
        account:'欢迎登录',
        menuList:[],
        modalShow:false,
        name:'',
        activeName:'',
        openName:[],
      }
    },
    computed: {
  //  isFollow () {
  //    return this.$store.state.modalShow;　　//需要监听的数据
  // },
      rotateIcon () {
        return [
          'menu-icon',
          this.isCollapsed ? 'rotate-icon' : ''
        ];
      },
      menuitemClasses () {
        return [
          'menu-item',
          this.isCollapsed ? 'collapsed-menu' : ''
        ]
      },
      dropdownToggle () {
        return [
          this.isCollapsed ? 'dropdown-modalShow' : ''
        ]
      }
    },
    created(){
      //this.getLeftMenuList();
      this.menuList = JSON.parse(sessionStorage.getItem('mu'));
      this.getUserInfo();
    },
    mounted(){

    },
    methods: {
     slectName(name){
       this.name = name;
       console.log(name,'选中的name');
     },
      editPwd(){
          this.$refs.formData.validate((valid) => {
            if(valid){
              if(this.formData.pwd == this.formData.second_pwd){
                if(this.formData.pwd.length < 6){
                  this.$Message.error('密码最少6位');
                }else{
                  this.formData.id = window.sessionStorage.getItem('tokenId');
                  this.$post('/merchant/auditPwd',this.formData).then(res => {
                    if(res.code == 0){
                      this.modalShow = false;
                      this.resetValidate('formData');
                      this.$Message.success("修改成功,请重新登录");
                       sessionStorage.clear();
                      this.$router.push({name:'login'})
                    }else{
                      this.$Message.error(res.msg);
                      this.modalShow = false;
                      this.resetValidate('formData');
                    }
                  })
                }
              }else{
                this.$Message.error('两次密码不一致');
              }
            }
          })
        },
      getUserInfo(){
       this.$get('/merchant/info')
        .then((res) => {
          console.log(res,"用户信息");
          if(res.code === 0){
            this.account = res.data.name
            // this.account=res.data.userNameCN;
            // sessionStorage.setItem('adminid',res.data.id)
          }
        })
      },
     getactiveName(activeName){
       // console.log(activeName,'activeName');
       this.activeName = activeName;
       this.openName = activeName.indexOf('-') != -1 ? activeName.split('-')[0] : activeName;
       this.openName = [ parseInt(this.openName) ]
      this.$nextTick(()=>{
        this.$refs.menu.updateOpened();
        this.$refs.menu.updateActiveName();
      })
     },
      getLeftMenuList(data) {
        //左侧导航栏
        this.$post('/sys/user/menu')
          .then((res) => {
            if(res.code === 0){
              // console.log( JSON.parse(res.data.menus),'menus')
              sessionStorage.setItem('mu',res.data.menus)
              this.menuList = JSON.parse(res.data.menus);
            }
          })
      },
      getLeftMenuListS(){
        // console.log(sessionStorage.getItem('mu'),'sessMu')
        this.menuList = JSON.parse(sessionStorage.getItem('mu'));
      },
      resetValidate(name) {
        this.$refs[name].resetFields();
      },
      handleClick(name){

        // this.$post('/sys/user/logout')
        // .then(res => {
        //   if(res.code == 0){
        //     sessionStorage.clear();
        //     this.$router.push({name:'login'})
        //   }
        // })
        // .catch(e => {
        //   console.log(e);
        //   // this.$Message.error(res.msg);
        // })
        if(name == 'logout'){
          this.$store.state.tagNavList=[];
          sessionStorage.clear();
          this.$router.push({name:'login'})
        }else{
          this.modalShow = true;
        }

      },
      handlePassword(){
        alert(1111)
      },
      collapsedSider () {
        this.$refs.sideLeft.toggleCollapse();
        this.modalShowLogo = !this.modalShowLogo;
      },
      linkPage (url) {
       // console.log(url)
        this.$router.push({path:url})
      },

    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped >
  .demo-spin-icon-load{
        animation: ani-demo-spin 1s linear infinite;
    }
    @keyframes ani-demo-spin {
        from { transform: rotate(0deg);}
        50%  { transform: rotate(180deg);}
        to   { transform: rotate(360deg);}
    }
    .demo-spin-col{
        height: 100px;
        position: relative;
        border: 1px solid #eee;
    }
  /deep/ .list-btn .ivu-input-wrapper,.list-btn .ivu-btn-primary{
    margin: 3px;
  }
  /deep/  .list-btn .ivu-date-picker{
    margin-right: 3px;
  }

  .layout{
    background: #f5f7f9;
    position: relative;
    overflow: hidden;
    height: 100%;
  }
  .ivu-layout{
    height: 100%;
  }
  .menu-icon{
    transition: all .3s;
  }
  .menu-item span{
    display: inline-block;
    overflow: hidden;
    width: 70%;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
    transition: width .2s ease .2s;
  }
  .menu-item i{
    transform: translateX(0px);
    transition: font-size .2s ease, transform .2s ease;
    vertical-align: middle;
    font-size: 16px;
  }
  .collapsed-menu i{
    transform: translateX(5px);
    transition: font-size .2s ease .2s, transform .2s ease .2s;
    vertical-align: middle;
    font-size: 22px;
  }
  .ivu-layout-sider-childrenren .ivu-menu{
    height: 100%;
    overflow-y: scroll;
  }
  .collapsed-menu .menu-item-title{
    display: none;
    transition: all .2s ease;
  }
  .ivu-layout-header{
    padding: 0;
    line-height: 0;
    height:89px;
  }
  .ivu-menu-horizontal{
    height: 50px;
    line-height: 50px;
  }
  .collapse-btn{
    float: left;
    color: #eee;
  }
  .rotate-icon{
    transform: rotate(-90deg);
  }
  .layout-nav{
    float: right;
  }
  .ivu-menu-item>i,.ivu-menu-submenu-title>i{
    margin: 0;
  }
  .ivu-layout-content{
    overflow-y: auto;
  }
  .tag-nav-wrapper {
    background: #f0f0f0;
    height: 40px;
    overflow: hidden;
    padding: 0;
  }

  .dropdown-hide{
    position: absolute;
    top: 18px;
    z-index: -1;
  }
  .dropdown-modalShow{
    z-index: 2000;
    transition: all .2s ease .5s;
  }

  .dropdown-hide a .ivu-icon{
    opacity: 0;
  }

  .dropdown-hide a .ivu-icon:hover{
    color: #fff;
    opacity: 1;
  }

  .ivu-dropdown{
    display: block;
  }

  .ivu-menu-dark.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu){
    background: none;
    color: rgba(255,255,255,0.7);
  }

  .ivu-menu-dark.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu):hover{
    color: rgba(255,255,255,1);
  }

  /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
  .ivu-menu::-webkit-scrollbar{
    width: 1px;  /*滚动条宽度*/
    height: 1px;  /*滚动条高度*/
  }

  /*定义滚动条轨道 内阴影+圆角*/
  .ivu-menu::-webkit-scrollbar-track{
    border-radius: 2.5px;  /*滚动条的背景区域的圆角*/
    background-color: #515a6e;/*滚动条的背景颜色*/
  }

  /*定义滑块 内阴影+圆角*/
  .ivu-menu::-webkit-scrollbar-thumb {
    border-radius: 2.5px;  /*滚动条的圆角*/
    background-color: #515a6e;  /*滚动条的背景颜色*/
  }
</style>
